<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天之痕，鬼知道</title>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="alert alert-info" role="alert">天之痕，鬼知道</div>
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">

                    <div class="col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" v-model="city" @keyup.enter="sear"
                                placeholder="回车或者点击按钮查询">
                            <span class="input-group-btn">
                                <button class="btn btn-default" @click="sear" type="button">Go!</button>
                            </span>
                        </div><!-- /input-group -->
                        <!-- <h4 v-show="city.trim() != ''">{{ "显示[" + city.trim() + "]的天气" }}</h4> -->
                        <div class="alert alert-success" v-show="city.trim() != ''">{{ "[" + city.trim() + "]" }}</div>

                    </div><!-- /.col-lg-6 -->


                </div>
                <div class="col-md-3"></div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-2" v-for=" item in weathers">
                        <div class="thumbnail">
                            <!-- <img src="..." alt="..."> -->
                            <div class="caption">
                                <h4 class="cont">{{ item.date }} </h4>
                                <h3 class="iconfont"> {{item.type}} </h3>
                                <hr>
                                <p class="cont">{{"最" + item.high }}</p>
                                <p class="cont">{{"最" + item.low }}</p>
                                <p class="cont"> {{ item.fengli.substr(9,2) }} <small class="alert-info">-{{ item.fengxiang }}</small></p>
                                <p class="cont"></p>
                                <!-- .replaceAll('[\<!\[\CDATA\[]','') -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>




    <script>
        //  API 返回可能有乱码
        //  http://wthrcdn.etouch.cn/weather_mini?city=%E4%B8%8A%E6%B5%B7

        // 音乐搜索 https://autumnfish.cn/search

        // var ct = "深圳";


        var app = new Vue({
            el: "#app",
            data: {
                city: '',
                weathers: []
            },
            methods: {
                sear: function () {
                    console.log("点击了搜索");
                    var that = this;
                    axios
                        .get(" http://wthrcdn.etouch.cn/weather_mini?city=" + this.city.trim())
                        .then(

                            function (res) {
                                if (res.data.desc == 'OK') {
                                    console.log(that.city + "最近天气如下：");
                                    console.log(res.data.data.forecast);
                                    that.weathers = res.data.data.forecast
                                } else {
                                    alert(res.data.desc)
                                }
                            },
                            // res => console.log(this.city + ":" + res.data.desc),
                            function () {
                                alert(res.data.desc)
                            })
                        .catch(function (e) {
                            console.log(e);
                            alert("请求异常，请查看控制台！");
                        });
                }
            }
        })

    </script>

    <style>
        .alert-info {
            color: orangered;
            font-size: 24px;
            text-align: left;
            font-family: "华文行楷";
        }

        .alert-success {
            color: orangered;
            font-size: 24px;
            text-align: center;

        }

        .iconfont {
            font-size: 42px;
            font-family: "华文行楷";
            color: coral;
            text-align: center;

        }

        .cont {
            font-size: x-large;
            text-align: center;
            font-family: "宋体";
        }
    </style>
</body>

</html>